<template>
    <fieldset>
        <legend>tab切换</legend>
        <button  v-for="btn in arr" :key="btn" @click="checkbtn(btn)" :class="['tab-button',{active:btn===choice}]">{{btn}}</button>
        <keep-alive>
            <div class="choice" :is="choice"></div>
        </keep-alive>
    </fieldset>
</template>
<script>
import email from "./email.vue"
import home from "./home.vue"
import my from "./my.vue"
export default{
    data(){
        return{
            arr:["my","home","email"],
            choice:"my"
        }
    },
    components:{
        "email":email,
        "home":home,
        "my":my
    },
    methods:{
        checkbtn(btn){
            this.choice=btn
        }
        }
    }
</script>
<style scoped>
.tab-button {
    padding: 6px 10px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border: 1px solid #ccc;
    cursor: pointer;
    background: #f0f0f0;
    margin-bottom: -1px;
    margin-right: -1px;
}

.tab-button:hover {
    background: #e0e0e0;
}

.tab-button.active {
    background: hotpink;
}

.tab {
    border: 1px solid #ccc;
    padding: 10px;
}

h1 {
    margin: 0;
}
</style>